%html
  %head
    =csrf_meta_tag  
    %title
      = configatron.community_name
      \- 
      =:new_clipping.l
    = javascript_include_tag 'community_engine'
    = stylesheet_link_tag 'application'
    = stylesheet_link_tag 'layout'
  %body
    .jumbotron
      %h1
        =:create_a_clipping.l
      %p
        =:click_on_an_image_below_to_clip_it.l
    %ul#clipping_image_list.thumbnails
      = image_tag 'spinner.gif', :plugin => "community_engine"
      =:loading_images.l
      %script{"type"=>"text/javascript"}
        ="$('#clipping_image_list').html($.post('#{load_images_from_uri_path(:uri => params[:uri]).html_safe}'));"
    =link_to :cancel_and_go_back_to.l + ' ' + @clipping.url, params[:uri], :class => 'btn btn-xs btn-primary'
    #lightbox.modal.fade{:role => 'dialog', "aria-hidden" => "true", :"aria-labelledby" => "send_to_friend_label", :tabindex => "-1", :style => 'padding-top: 60px;'}
      = bootstrap_form_for(:clipping, :url => user_clippings_path(@user), :layout => :horizontal) do |f|
        = f.text_field :url

        %img#clipping_preview{"src"=>nil, "width"=>"100px", "style"=>"float:right"}

        = f.text_field :image_url

        = f.text_field :tag_list, {:help => :optional_keywords_describing_this_clipping_separated_by_commas.l, :autocomplete => "off",:id => 'clipping_tag_list'}

        = tag_auto_complete_field 'clipping_tag_list', {:url => {:controller => "tags", :action => 'auto_complete_for_tag_name'}, :tokens => [','] }

        = f.text_field :description

        = f.primary :create.l

  :javascript
    $("#clipping_image_list img").on('click', function(){
      $('#clipping_image_url').val($(this).attr('src'));
      $('#clipping_preview').attr('src', $(this).attr('src'));
      $('#lightbox').modal();
    });

